<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${invitation.userName}"></title>
    <link rel="stylesheet" type="text/css" href="/css/template.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <script type="text/javascript" src="/js/showdown.min.js"></script>
    <link rel="dns-prefetch" href="//cdn.mathjax.org" />
    <script type="text/x-mathjax-config" src="/js/mathjax-config.js"></script>
    <script src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript" src="/js/template.js"></script>
</head>

<body>
    <div class="main">
        <div class="item-top">
            <div class="head-img"> <img th:src="${invitation.headImage}"> </div>
            <div class="author">
                <div class="username" th:text="${invitation.userName}"></div>
                <div class="createTime" th:text="${#dates.format(invitation.createTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
            </div>
            <div class="hide"><i class="fa fa-chevron-down"></i></div>
            <div class="star">
                <input type="text" th:value="${invitation.userId}" style="display: none;">
                <a class="button is-primary" onclick="starUser(this)"
                th:classappend="${userStarStatus !=null&&userStarStatus} ? 'orange' : 'green'">
                    <i class="fa" th:classappend="${userStarStatus !=null&&userStarStatus} ? 'fa-check' : 'fa-star'"></i>
                    <span th:text="${userStarStatus !=null&&userStarStatus} ? '已关注' : '关注'"></span>
                </a>
            </div>
        </div> <textarea id="md-area">###一、在这里你可以上传图片
![](/upload/2/jpg/d030ecd0-ea99-48d3-b0a5-efdd73394201.jpg)
###二、在这里你也可以上传视频
<video id='video' controls='' preload='none' poster=''><source id='mp4' src='/upload/2/mp4/a2c53c86-5d4c-4d7b-af9b-5bb10ec62404.mp4' type='video/mp4'></video>
###三、如果您是个数学发烧友，那么这里可以在线编辑数学公式并发布
$$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
$$(\sum\_{k=1}^n a\_k b\_k)^2\leq(\sum\_{k=1}^n a\_k^2)(\sum\_{k=1}^n b\_k^2)$$
$$\frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        }
    }$$

$$f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi$$
###四、你甚至可以和你的小伙伴分享文件的链接，供下载，像这样
<a class='appendix' href='/upload/2/pdf/1da6037b-0c26-4b4b-82f2-30f55039815a.pdf'>/upload/2/pdf/1da6037b-0c26-4b4b-82f2-30f55039815a.pdf</a>
</textarea>
<div class="center">
    <div class="title" th:text="${invitation.title}"></div>
    <div id="show"></div>
    <div class="foot"> 
        <input type="text" th:value="${invitation.invitationId}" style="display: none;">
        <a class="like" onmouseover="msgonmouseover(0)" onmouseout="msgonmouseout(0)" onclick="like(this)"
        th:classappend="${myLikeStatus != null&&myLikeStatus} ? 'red' : 'grey'">
            <i class="fa fa-heart"></i>
            <span class="num" th:text="${invitation.likeNumber}"></span>
        </a> 
        <a class="star" onmouseover="msgonmouseover(1)" onmouseout="msgonmouseout(1)" onclick="star(this)"
        th:classappend="${myStarStatus != null&&myStarStatus} ? 'yellow' : 'grey'">
            <i class="fa fa-star"></i>
            <span class="num" th:text="${invitation.starNumber}"></span>
        </a>
        <a class="comment" onmouseover="msgonmouseover(2)" onmouseout="msgonmouseout(2)"
        th:classappend="${myComments != null&&myComments.size() != 0||myStoreys != null&&myStoreys.size() != 0} ? 'blue' : 'grey'">
            <i class="fa fa-comments"></i>
            <span class="num" th:text="${invitation.commentNumber}"></span>
        </a>
    </div>
</div>
<div class="like-msg three-msg-box">
    <img src="/upload/1/jpg/64221133-12f3-4739-a278-fa52926a1ec8.jpg">
</div>
<div class="star-msg three-msg-box">
    <img src="/upload/1/jpg/64221133-12f3-4739-a278-fa52926a1ec8.jpg">
</div>
<div class="comment-msg three-msg-box">
    <div class="operation">
        <a onclick="openDialog()"><i class="fa fa-image"></i></a>
        <a><i class="fa fa-at"></i></a>
        <a class="tag-top" onclick="tagTop()"><i class="fa fa-eject"></i></a>
    </div>
    <div class="up-contain">
        <textarea id="md-area1"class="write" placeholder="写下你的跟帖"></textarea>
    </div>
    <input type="text" th:value="${invitation.invitationId}" style="display: none;">
    <a class="button comment-btn" onclick="storey(this)">发表跟帖</a>
</div>
<div class="bottom">
    <div class="up">全部回复</div>
    <div class="msg">
        <div class="comment-item" th:each="storeyView,storeyViewStatus:${storeyViews}">
            <div class="comment-top">
                <div class="comment-head"><img th:src="${storeyView.headImage}"></div>
                <div class="comment-author">
                    <div class="comment-username" th:text="${storeyView.userName}"></div>
                    <div class="comment-createTime createTime" th:text="${#dates.format(storeyView.createTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
                </div>
                <a class="operation"><i class="fa fa-chevron-down"></i></a>
            </div>
            <div class="comment-content" th:value="${storeyView.content}">
            </div>
            <div class="comment-bottom">
                <div class="storey">
                    <span th:text="${storeyViewStatus.index+1}"></span>
                    <span>层</span>
                </div>
                <input type="text" th:value="${storeyView.userId}"  style="display: none;">
                <a class="comment" onclick="showCommentBox(this)"
                th:classappend="${myStoreyIdsOfComment != null&&myStoreyIdsOfComment.contains(storeyView.storeyId)} ? 'blue' : 'grey'">
                    <i class="fa fa-comments"></i>
                    <span th:text="${storeyView.commentNumber}"></span>
                </a>
                <input type="text" th:value="${storeyView.storeyId}"  style="display: none;">
                <a class="thumbs" onclick="supportStorey(this)"
                th:classappend="${myStoreyIdsOfSupport != null&&myStoreyIdsOfSupport.contains(storeyView.storeyId)} ? 'blue' : 'grey'">
                    <i class="fa fa-thumbs-up"></i>
                    <span th:text="${storeyView.supportNumber}"></span>
                </a>
                <input type="text" th:value="${invitation.invitationId}" style="display: none;">
            </div>
            <div class="sub-comment">
                <div class="input-box">
                    <input class="sub-content" placeholder="回复层主" onblur="removeCommentBox(this)">
                    <!-- 用于表示子帖的id -->
                    <input type="text" th:value="${storeyView.storeyId}" style="display: none;">
                    <a class="submit" onclick="comment(this)">发表回复</a>
                    <!-- 用于表示回复的人的id -->
                    <input type="text" value="0" style="display: none;">
                    <!-- 用于表示帖子的id -->
                    <input type="text" th:value="${invitation.invitationId}" style="display: none;">
                </div>
                <form  th:each="comment:${comments}">
                    <div class="sub-item" th:if="${comment.storeyId==storeyView.storeyId}">
                        <div class="sub-head">
                            <img th:src="${comment.headImage}" class="sub-img">
                            <div class="sub-name" th:text="${comment.userName}"></div>
                            <a class="sub-right"><i class="fa fa-chevron-down"></i></a>
                        </div>
                        <div class="sub-contain">
                            <!-- 如果被回复者是用户而不是帖子或者子帖 -->
                            <span class="comment-to-user" th:if="${comment.targetType=='comment'}">
                                <span class="span-grey">回复:</span>
                                <span class="span-brown">@</span>
                                <span class="span-brown target-name" th:text="${comment.targetUserName}"></span>
                            </span>
                            <span th:text="${comment.content}" class="span-content"></span>
                        </div>
                        <div class="sub-bottom">
                            <div class="sub-time createTime" th:text="${#dates.format(comment.commentTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
                            <input th:value="${comment.userName}" style="display: none;">
                            <a class="sub-comment-icon" onclick="showCommentBoxByUser(this)">
                                <!-- <i class="fa fa-comments"></i> -->
                                <span>回复</span>
                            </a>
                            <input th:value="${comment.id}" style="display: none;">
                            <a class="sub-support" onclick="supportComment(this)"
                            th:classappend="${myCommentIdsOfSupport != null&&myCommentIdsOfSupport.contains(comment.id)} ? 'blue' : 'grey'">
                                <i class="fa fa-thumbs-up"></i>
                                <span th:text="${comment.supportNumber}"></span>
                            </a>
                            <input type="text" th:value="${invitation.invitationId}" style="display: none;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="down">暂无更多</div>
    </div>
</div>
</div>
<!-- 图片上传对话框 -->
<div class="md-upload" style="display:none;">
<div class="md-dialog">
    <div class="dialog-top">
        <h3>图片上传</h3>
    </div>
    <div class="dialog-content">
        <div class="warning">仅支持 JPG、GIF、PNG 格式的本地图片</div>
        <div class="desc">请输入图片地址或点击按钮上传</div>
        <div class="input-url">
            <a class="icon" onclick="addFile()"><i class="fa fa-image btn"></i></a>
            <input type="file" style="display: none;" name="file" accept="image/*" class="upload-btn">
            <input class="input fileAddress" type="text" name="input" id="fileAddressOfImage"
                placeholder="http://westudy.ltd/image.jpg">
        </div>
    </div>
    <div class="dialog-bottom">
        <a class="button" onclick="cancelUpload()">取消</a>
        <a class="button is-primary" onclick="insert()">插入</a>
    </div>
</div>
</div>
</body>

</html>